<template>
<a-modal :visible="visible"
         :footer="null"
         @cancel="emit('close')"
         width="80%"
         :title="`文章[${title}]的评论`">
  <a-table :dataSource="comments" :columns="columns">
    <template #bodyCell="{ column, text, record }">
      <template v-if="column.dataIndex === 'author'">
        {{ record.author ? record.author.name : '匿名用户' }}
      </template>
      <template v-if="column.dataIndex === 'reply'">
        {{ record.reply ? record.reply.author ? record.reply.author.name : '匿名用户' : '-' }}
      </template>
      <template v-if="column.dataIndex === 'status'">
        <a-tag color="green" v-if="record.status === 0">正常发布</a-tag>
        <a-tag color="orange" v-if="record.status === 1">需审核</a-tag>
        <a-tag color="red" v-if="record.status === 2">违规</a-tag>
      </template>
      <template v-if="column.key === 'operation'">
        <a-button type="link" v-if="record.status === 0" @click="reply(record.id)">回复</a-button>
        <a-button type="link" v-if="record.status === 1" @click="agreeComment(record.id)">通过</a-button>
        <a-button type="link" danger v-if="record.status !== 2" @click="violation(record.id)">违规评论</a-button>
      </template>
    </template>
  </a-table>
</a-modal>
</template>

<script setup>
import {computed, ref, watch} from "vue";
import {apiGet, apiPut} from "../../../../fentch";
import {message} from "ant-design-vue";

const props = defineProps({
  // ID
  id: {
    type: Number,
    required: true,
    default: 0
  },
  // 标题
  title: {
    type: String,
    required: true,
    default: ''
  },
  // 可见性
  visible: {
    type: Boolean,
    required: true,
    default: false
  }
})

const filteredInfo = ref();
const sortedInfo = ref();
const columns = computed(() => {
  const filtered = filteredInfo.value || {};
  const sorted = sortedInfo.value || {};
  return [
    {key: 'author', title: '发布者', dataIndex: 'author'},
    {key: 'comment', title: '评论内容', dataIndex: 'comment'},
    {key: 'reply', title: '回复', dataIndex: 'reply'},
    {key: 'status', title: '状态', dataIndex: 'status'},
    {key: 'operation', title: '操作'}
  ]
})
const comments = ref([])

// 获取评论
const getComment = id => {
  apiGet(`/comments/all/${id}`).then(res => {
    if (res.data.code === 0) {
      comments.value = res.data.data
      return
    }
    message.error(res.data.message)
  })
}

// 检测变化
watch(() => props.id, (value, oldValue) => {
  if (value !== 0) {
    comments.value = []
    getComment(value)
  }
})

// 关闭
const emit = defineEmits(['close'])

// 回复评论
const reply = target => {
  message.error('暂不支持该操作')
}

// 更改评论状态
const statusChange = (id, status) => {
  apiPut(`/comments/status/${id}`, {status}).then(res => {
    if (res.data.code === 0) {
      message.success('修改完成')
      getComment(props.id)
      return
    }
    message.error(res.data.message)
  })
}

// 通过评论
const agreeComment = id => {
  statusChange(id, 0)
}

// 违规评论
const violation = id => {
  statusChange(id, 2)
}
</script>

<style scoped>

</style>